import type { Theme } from 'unocss/preset-uno'
import { defineConfig, presetIcons, presetWind3, transformerDirectives } from 'unocss'
import presetTheme from 'unocss-preset-theme'

const defaultTheme: Theme = {
  backgroundColor: {
    primary: 'rgb(255, 255, 255)',
    secondary: 'rgb(241, 243, 246)',
    active: 'rgb(235.9, 245.3, 255)',
  },
  borderColor: {
    primary: 'rgb(228, 228, 231)',
  },
  colors: {
    primary: 'rgb(50, 54, 57)',
    secondary: 'rgb(113, 113, 122)',
    active: 'rgb(0, 107, 230)',
  },
}

const darkTheme: Theme = {
  backgroundColor: {
    primary: 'rgb(28, 30, 35)',
    secondary: 'rgb(20, 22, 26)',
    active: 'rgb(46, 48, 51)',
  },
  borderColor: {
    primary: 'rgb(54, 54, 58)',
  },
  colors: {
    primary: 'rgb(242, 242, 242)',
    secondary: 'rgb(161, 161, 170)',
    active: '#FFFFFF',
  },
}

export default defineConfig({
  // ...UnoCSS options
  theme: defaultTheme,
  presets: [
    presetWind3(),
    presetIcons({
      collections: {
        fa4j: {
          logo: '<svg viewBox="0 0 48 48"><path d="M24 4C12.9543 4 4 12.9543 4 24C4 32.6746 9.52258 40.0593 17.2436 42.83L23 27L19 29L22 15L18 18L21 5L42 16L28 14L25 23L34.1078 21.5389L17.462 42.9069C19.5107 43.6153 21.7104 44 24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4Z" fill="currentColor"/></svg>',
        },
      },
    }),
    presetTheme<Theme>({
      theme: {
        dark: darkTheme,
      },
    }),
  ],
  transformers: [transformerDirectives()],
  shortcuts: {},
  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // 这里只写我需要的，当然你也可以定制，参考：https://unocss.dev/guide/extracting#extracting-from-build-tools-pipeline
        // include js/ts files
        'src/**/*.{js,ts}',
      ],
    },
  },
})
